<template>
	<view class="local-video-player y-flex y-flex-1 bg-000">
		<yb-iframe ref="iframe" class="y-flex-1"
		:loading-show="false" src="./hybrid/html/video/my-local-player.html"
		@loaded="handleIframeLoaded"
		@message="handeIframeMessage"
		@destroyed="handleIframeDestroy"></yb-iframe>
		<view class="local-video-player-nav-bar" :style="{
			'opacity': controlsShow ? 1 : 0
		}">
			<com-nav-bar :title="name" :color="skinColor.color_white" bg-color="rgba(0,0,0,0)" :custom-back="destroy">
				<template #title>
					<com-text lines="2" class="y-flex-1 ml-20 mr-10" weight="bold" line-height="40" size="35" :color="skinColor.color_white" :value="name"></com-text>
				</template>
				<template #right>
					<com-icon name="more_android" :color="skinColor.color_white" size="40" @click="toolbarShow = true" />
				</template>
			</com-nav-bar>
		</view>
		<com-toolbar radius="5" :top="windowTop + 'px'" width="350" :visible.sync="toolbarShow" :bg-color="skinColor.color_black">
			<com-toolbar-item :color="skinColor.color_white" text="分享文件" @click="$native.shareFile(path)"></com-toolbar-item>
		</com-toolbar>
		<com-modal title="记录提示" :content="'本次观看到 ' + progress + '\n\n是否保存此次观看位置'"
		:visible.sync="modalShow"
		:bg-color="skinColor.color_bg_2"
		:title-color="skinColor.color_1"
		:content-color="skinColor.color_2"
		cancel-text="取消保存"
		confirm-text="保存位置"
		@confirm="updatePositon"
		@cancel="handleCancel"
		@hide="play"></com-modal>
	</view>
</template>

<script>
	import appMixin from '@/assets/mixin/app.js'
	import { openDB, closeDB, update, insert, remove, select } from '@/assets/database'
	import { localMime } from '@/assets/js/config.js'
	import { readAllLines } from '@/uni_modules/ybuts-filereader'
	export default {
		mixins: [appMixin],
		computed: {
			id () {
				return this.app.$Route.query.id
			},
			name () {
				return this.app.$Route.query.name
			},
			path () {
				return this.app.$Route.query.path
			},
			type () {
				return this.app.$Route.query.type
			},
			initialTime () {
				return this.app.$Route.query.position || 0
			},
			history () {
				return this.$store.getters['setting/GET_HISTORY']
			}
		},
		data () {
			return {
				toolbarShow: false,
				currentTime: 0,//播放时间
				progress: '',//播放进度
				modalShow: false,
				controlsShow: true,
				paused: false,//是否暂停
				isError: false//是否报错
			}
		},
		methods: {
			handleIframeLoaded (e) {
				//页面加载完毕开始注入js
				uni.getScreenBrightness({
					success: async res => {
						await openDB()
						const data = await select('danmufilter', '', '')
						closeDB()
						const arg = {src: this.path, title: this.name, initialTime: this.initialTime, danmufilter: data.list, initialLight: res.value, initialVolume: this.$native.getVolume()}
						this.$refs.iframe && this.$refs.iframe.evalJS(`setVideo('${encodeURIComponent(JSON.stringify(arg))}');`)
					}
				})
			},
			async handeIframeMessage (e) {
				const data = e.data
				if ( data.controlschange ) {
					this.controlsShow = data.controlschange.show
				}
				if ( data.timeupdate ) {
					this.currentTime = parseInt(data.timeupdate)
				}
				if ( data.seeklight >= 0 ) {
					uni.setScreenBrightness({
						value: data.seeklight
					})
				}
				if ( data.seekvolume >= 0 ) {
					this.$native.setVolume(data.seekvolume)
				}
				if ( data.capturesaved ) {
					if ( data.capturesaved.code != 200 ) {
						this.$native.saveBase64ImageToAlbum(data.capturesaved.data.base64, data.capturesaved.fileName).then(path => {
							this.showToast('保存到相册成功')
						}).catch(() => {
							this.showToast('保存到相册失败')
						})
					}
				}
				if ( data.directionchange ) {
					if ( data.directionchange.code != 200 ) {//锁定屏幕方向失败
						var direction = data.directionchange.to//预期屏幕方向
						if ( direction ) plus.screen.lockOrientation(direction)//锁定屏幕方向
						else plus.screen.unlockOrientation()//解除屏幕方向锁定
					}
				}
				//增加弹幕过滤规则
				if ( data.danmufilteradd ) {
					await openDB()
					try{
						const rule = data.danmufilteradd.detail
						await insert('danmufilter', {
							pattern: rule.pattern,
							type: rule.type
						})
						closeDB()
					}catch(e){
						closeDB()
						uni.showToast({
							title: e.message,
							icon: 'none'
						})
					}
				}
				//删除弹幕过滤规则
				if ( data.danmufilterreduce ) {
					await openDB()
					try{
						const rule = data.danmufilterreduce.detail
						await remove('danmufilter', 'pattern = "' + rule.pattern + '" AND type = "' + rule.type + '"' )
						closeDB()
					}catch(e){
						closeDB()
						uni.showToast({
							title: e.message,
							icon: 'none'
						})
					}
				}
			},
			handleIframeDestroy () {
				this.$Router.back()
			},
			updatePositon () {
				openDB().then(() => {
					update('local', {position: this.currentTime, progress: this.progress}, 'id = ' + this.id).then(()=> {
						closeDB()
						this.destroy()
					}).catch(err => {
						uni.showToast({
							title: err.message,
							icon: 'none'
						})
						closeDB()
						this.destroy()
					})
				})
			},
			handleCancel () {
				this.destroy()
			},
			play () {
				this.$refs.iframe && this.$refs.iframe.evalJS('play();')
			},
			pause () {
				this.$refs.iframe && this.$refs.iframe.evalJS('pause();')
			},
			destroy () {
				this.$refs.iframe && this.$refs.iframe.destroy()
			},
			showToast (data) {
				this.$refs.iframe && this.$refs.iframe.evalJS(`showToast('${encodeURIComponent(JSON.stringify(data))}')`)
			}
		},
		onBackPress(event) {
			if ( event.from == 'backbutton' ) {
				if ( this.toolbarShow ) {
					this.toolbarShow = false
					return true
				}
				if ( this.modalShow ) {
					this.modalShow = false
					return true
				}
				if ( this.currentTime ) {
					this.progress = this.app.$utils.timeFormat(this.currentTime, this.currentTime < 3600 ? 'mm:ss' : 'HH:mm:ss')
					if ( this.history == 0 ) {
						this.modalShow = true
						this.pause()
					} else if ( this.history == 1 ) this.updatePositon()
					else this.destroy()
					return true
				}
			}
			return false
		}
	}
</script>

<style>
	.local-video-player {
		height: 100%;
	}
	.local-video-player-nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}
</style>